<template>
  <div id="stuScoreCharts" v-if="visiable">
    <el-drawer v-model="visiable" :title="dynamicTitle" size="98%" class="drawer" @closed="disposeAllCharts">
      <div class="main-box">
        <section>
          <globle-linear-border class="left-box">
            <score-display v-if="chartData && rowData" id="maxMinAve" :data="chartData"
              :selectedStuNum="rowData.selectedNum"></score-display>
          </globle-linear-border>
          <globle-linear-border class="left-box">
            <div id="passRate"></div>
          </globle-linear-border>
          <globle-linear-border class="left-box">
            <div id="goodRate"></div>
          </globle-linear-border>
        </section>
        <main>
          <globle-linear-border class="center-box">
            <div id="scoreScale"></div>
          </globle-linear-border>
          <globle-linear-border class="center-box">
            <div id="scoreCounter"></div>
          </globle-linear-border>
        </main>
        <section>
          <globle-linear-border class="right-box">
            <personal-rank v-if="chartData" id="personalRank" :data="chartData"></personal-rank>
          </globle-linear-border>
        </section>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { computed, onBeforeUnmount, ref } from 'vue';
import echarts from '../../../../../echarts';
import {  IScoreAnalyseByTch, IThemeColor, ICourse } from '../../../../../type/index';
import { initScoreScale } from './chartsInit/ScoreScale';
import { initScoreCounter } from './chartsInit/scoreCounter';
import { initGoodRate } from './chartsInit/goodRate';
import { initPassRate } from './chartsInit/passRate';
import { useThemeStore } from '../../../../../store/theme';
import ScoreDisplay from './components/ScoreDisplay.vue';
import PersonalRank from './components/PersonalRank.vue';
import { nextTick } from 'vue';

const visiable = ref(false);
const themeStore = useThemeStore();
const chartData = ref<IScoreAnalyseByTch>();
const themeColor = ref<IThemeColor>(themeStore.currentThemeColor);
const isCloseMenu = ref<boolean>(themeStore.isColseMenu);
const rowData = ref<ICourse>();

themeStore.$subscribe((args, states) => {
  if (themeColor.value.font != states.currentThemeColor.font) {
    themeColor.value = states.currentThemeColor;
    disposeAllCharts(); //销毁之前的实例
    initAllCharts(); //重新创建
  }

  if (isCloseMenu.value != states.isColseMenu) {
    isCloseMenu.value = states.isColseMenu;

    setTimeout(() => {
      disposeAllCharts(); //销毁之前的实例
      initAllCharts(); //重新创建
    }, 300);
  }
});

const open = async (row: ICourse, data: IScoreAnalyseByTch) => {
  visiable.value = true;
  rowData.value = row;
  // console.log('rowData',rowData);
  // console.log('chartData',data);

  chartData.value = data;
  nextTick(() => { initAllCharts() })
}

const dynamicTitle = computed(() => {
  if (rowData.value) return `${rowData.value.teachClass}成绩分析`
  else return `成绩分析`
})

const initAllCharts = () => {
  const data = chartData.value;
  if (!data) return;

  const goodRate = ((data.lineYAxis[3] + data.lineYAxis[4]) / data.hasScoreNum).toFixed(2);
  const passRate = ((data.lineYAxis[1] + data.lineYAxis[2] + data.lineYAxis[3] + data.lineYAxis[4]) / data.hasScoreNum).toFixed(2);

  initScoreScale(echarts, document.querySelector('#scoreScale') as HTMLElement, data.lineYAxis, data.lineXAxis, themeColor.value);
  initScoreCounter(echarts, document.querySelector('#scoreCounter') as HTMLElement, data.lineYAxis, data.lineXAxis, themeColor.value);
  initGoodRate(echarts, document.querySelector('#goodRate') as HTMLElement, Number(goodRate), themeColor.value);
  initPassRate(echarts, document.querySelector('#passRate') as HTMLElement, Number(passRate), themeColor.value);
};

const disposeAllCharts = () => {
  if(document.querySelector('#scoreScale')) echarts.dispose(document.querySelector('#scoreScale') as HTMLElement);
  if(document.querySelector('#scoreCounter')) echarts.dispose(document.querySelector('#scoreCounter') as HTMLElement);
  if(document.querySelector('#goodRate')) echarts.dispose(document.querySelector('#goodRate') as HTMLElement);
  if(document.querySelector('#passRate')) echarts.dispose(document.querySelector('#passRate') as HTMLElement);
};

onBeforeUnmount(() => {
  disposeAllCharts();
});

defineExpose({ open })
</script>

<style lang="scss" scoped>
#stuScoreCharts {
  height: 100%;

  .main-box {
    padding-top: 16px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    // border: 2px solid red;

    main {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // border: 2px solid red;

      .center-box {
        height: 48%;

        #scoreScale,
        #scoreCounter {
          height: 100%;
        }
      }
    }

    section {
      width: 23%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .left-box {
        height: 32%;

        #maxMinAve,
        #passRate,
        #goodRate {
          height: 100%;
        }
      }

      .right-box {
        height: 100%;

        #personalRank {
          width: 100%;
          // height: 100%;
        }
      }
    }
  }
}</style>
